<template>
    <h1>Banner设置</h1>
    <div class="container">
        <el-button type="primary" style="margin-bottom: 10px" @click="edit">
            新增类型
        </el-button>
        <el-table :data="types" border style="width: 100%" locale="zhCn">
            <el-table-column type="index" label="序号" width="180" />
            <el-table-column prop="name" label="类型名" />
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button
                        type="primary"
                        @click="edit($event, scope.row.name, scope.row.id)"
                    >
                        编辑
                    </el-button>
                    <el-button
                        type="danger"
                        @click="handleDelete($event, scope.row.id)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-dialog
            v-model="dialogVisible"
            :title="selectId == 0 ? '新增类型' : '修改类型'"
            :width="'30%'"
        >
            <el-input v-model="typeName" placeholder="请输入类型名"></el-input>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submit">确认</el-button>
                </span>
            </template>
        </el-dialog>
        <el-dialog v-model="dialogVisible2" title="删除类型" :width="'30%'">
            <p style="font-size: 22px; text-indent: 2em">
                删除后所有引用该文章类型的都会被设置为未分类，确认删除？
            </p>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible2 = false">取消</el-button>
                    <el-button type="danger" @click="delSubmit">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import request from '@/api';
import { Type } from '@/types';
import { ElMessage } from 'element-plus';
import { ref } from 'vue';
const typeName = ref('');
const selectId = ref(0);
// 类型
const types = ref<Array<Type>>([]);
// 类型列表请求
request.get('/GetArticleType').then(res => {
    types.value = res.data;
});
const dialogVisible = ref(false);
const dialogVisible2 = ref(false);
const edit = (event: any, name = '', id: number) => {
    typeName.value = name;
    dialogVisible.value = true;
    selectId.value = id || 0;
};
const handleDelete = (e, id) => {
    dialogVisible2.value = true;
    selectId.value = id;
};
const delSubmit = async e => {
    let res = await request({
        url: `/DeleteArticleType/${selectId.value}`,
        method: 'get',
    });
    if (res.success) {
        ElMessage.success('删除成功');
        dialogVisible2.value = false;
        request.get('/GetArticleType').then(res => {
            types.value = res.data;
        });
    } else {
        ElMessage.error(res.msg);
    }
};
const submit = async e => {
    if (typeName.value.trim() == '') {
        ElMessage.error('类型名不能为空');
        return;
    }
    // 检查类型名是否包含特殊字符或者空格
    if (
        /[`~!@#$^&*()=|{}':;',\s\[\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]/.test(
            typeName.value
        )
    ) {
        ElMessage.error('类型名不能包含特殊字符');
        return;
    }
    // 检查类型名是否已经存在
    const isExist = types.value.some(
        item => item.name.toLowerCase() == typeName.value.toLowerCase()
    );

    if (typeName.value.trim().length > 30) {
        ElMessage.error('类型名不能超过30个字符');
        return;
    }
    if (isExist) {
        ElMessage.error('类型名已经存在');
        return;
    }

    let res = await request({
        url: '/EditArticleType',
        method: 'post',
        data: {
            name: typeName.value,
            id: selectId.value,
        },
    });

    if (res.success) {
        ElMessage.success('操作成功');
        dialogVisible.value = false;
        request.get('/GetArticleType').then(res => {
            types.value = res.data;
        });
    }
};
</script>
<style scoped lang="less"></style>
